<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .wrapAll {
            width: 1226px;
            height: 460px;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
            overflow: hidden;
        }

        .slideBar {
            height: 460px;
            /* width: 4904px; */
            width: max-content;
            position: absolute;
            left: 0;
        }

        .slideBar li {
            width: 1226px;
            float: left;
        }


        .dotList {
            position: absolute;
            right: 50px;
            bottom: 20px;
            display: flex;
        }

        .dotList li {
            width: 15px;
            height: 15px;
            background-color: #fff;
            margin: 5px;
            border-radius: 50%;
        }

        .dotList .active {
            background-color: blue;
        }

        .left,
        .right {
            width: 40px;
            height: 80px;
            background-color: rgba(0, 0, 0, 0.6);
            position: absolute;
            z-index: 999;
        }

        .left {
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            /* margin-top:-40px; */
        }

        .right {
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <div class="wrapAll">
        <div class="left"></div>
        <div class="right"></div>
        <ul class="slideBar">
            <li><img src="../images/1.jpg" alt=""></li>
            <li><img src="../images/2.jpg" alt=""></li>
            <li><img src="../images/3.jpg" alt=""></li>
            <li><img src="../images/4.jpg" alt=""></li>
            <li><img src="../images/1.jpg" alt=""></li>
        </ul>
        <ul class="dotList">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script>
    $(function () {
        var clientWidth = $(".slideBar li").width();
        var index = 0; //记录轮播的下标
        var timer = null;

        autoPlay();

        $(".dotList li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            index = $(this).index();
            $(".slideBar").animate({ left: -clientWidth * index })
        })

        $(".wrapAll").hover(function () {
            clearInterval(timer);
        }, function () {
            autoPlay();
        });

        $(".left").click(function () {
            index--;

            // 问题 如果left连点 -> animate(,,,fn) 回调函数不会执行, => 没有办法切换
            // 解决办法  连续点击时 => 如果小于0(第一张切第四张 看起来) => 如果小于0(第五张看起来像是第一张)  -> 先切到第五张,再滚动到第四张  

            if (index < 0) {
                index = $(".slideBar li").length - 1;
                $(".slideBar").stop().css({ left: -clientWidth * index }); // 先切到第五张
                index--;     //滚动到第四张
            }

            $(".dotList li").eq(index == $(".slideBar li").length - 1 ? 0 : index).addClass("active").siblings().removeClass("active");
            $(".slideBar").stop().animate({ left: -clientWidth * index }, function () {
                // console.log("运动结束");
                // if (index >= $(".slideBar li").length - 1) {
                //     index = 0;
                //     $(".slideBar").css({ left: 0 });
                // }
            })

        })
        $(".right").click(function () {
            index++;
            // 问题 如果right连点 -> animate(,,,fn) 回调函数不会执行, => 没有办法第五张切第一张
            // 解决办法  连续点击时 => 如果超出第五张(第五张看起来像是第一张),滚动到第二张???  -> 先切到第一张,再滚动到第二张  
            if (index > $(".slideBar li").length - 1) {
                $(".slideBar").stop().css({ left: 0 }); // 先切到第一张
                index = 0;   //下标也重置为 0
                index++;     //滚动到第二张
            }

            $(".dotList li").eq(index == $(".slideBar li").length - 1 ? 0 : index).addClass("active").siblings().removeClass("active");
            $(".slideBar").stop().animate({ left: -clientWidth * index }, function () {
                // console.log("运动结束");
                if (index >= $(".slideBar li").length - 1) {
                    index = 0;
                    $(".slideBar").css({ left: 0 });
                }
            })
        })



        function autoPlay() {
            clearInterval(timer);
            timer = setInterval(function () {
                index++;

                $(".dotList li").eq(index).addClass("active").siblings().removeClass("active");
                $(".slideBar").stop().animate({ left: -clientWidth * index }, function () {

                    // 第四张如何滚动到第一张?   => 障眼法 
                    // 第四张 之后 加了第五张(和第一张一样的  滚动到第五张时感觉就是第一张)

                    // 第四张 滚动到 第五张 切 第一张

                    // 每次运动完毕之后判断  如果是第五张   切  第一张
                    if (index >= $(".slideBar li").length - 1) {
                        index = 0;
                        $(".slideBar").stop().css({ left: 0 });
                    }
                })
            }, 2000);
        }


    })

</script>

</html>